<template>
<!-- 单个推荐列表底部 -->
  <div class="bottom">
      <ListsBottomLeft :list="list"/>
      <div v-if="$route.meta.recommend">
        <img v-if="!fav" src="../assets/images/unfavorite.png" alt="" width="25" @click.stop="love">
        <img v-else src="../assets/images/favorite.png" alt="" width="25" @click.stop="nolove">
      </div>
      <div class="bottomRight" v-if="!$route.meta.recommend">
          <img v-if="!fav"  src="../assets/images/unfavorite.png" alt="" width="25" @click.stop="love">
          <img v-else src="../assets/images/favorite.png" alt="" width="25" @click.stop="nolove">
          <img src="../assets/images/comment.png" alt="" width="25">
          <img src="../assets/images/share.png" alt="" width="25">
      </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import ListsBottomLeft from  "@/components/ListsBottomLeft.vue"
export default {
    components:{ ListsBottomLeft },
    props:["list"],
    data: function(){
      return{
        fav: false,
      }
    },
    methods:{
    ...mapMutations(["favoriteAdd","favoriteReduce"]),

      love(){
        this.toast();
        this.fav = true;
        this.favoriteAdd({newCook:this.list })
      },
      nolove(){
        this.toast1();
        this.fav = false;
        this.favoriteReduce({id:this.list.id })
      },
      toast: function(){
        this.$toast({
          message: '收藏成功',
          position: 'bottom',
          className: "love",
        });
     },
     toast1: function(){
        this.$toast({
          message: '取消收藏',
          position: 'bottom',
          className: "love",
        });
     },
    }
}
</script>

<style lang="less">
.love{
  background-color: #4c4c4cd1 !important;
}
  .bottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    .bottomRight{
        width: 100px;
        // background-color: pink;
        display: flex;
        justify-content: space-between;
    }
  }
</style>